<template>
  <div>
    <label :class="{changeAnimate:isChangeAnimate,resetAnimate:!isChangeAnimate}">{{info.label}}</label>
    <input :type="info.type ? info.type : 'text'" @focus="isChangeAnimate=true" @blur="resetStyle" v-model="info.val">
    <i @click="toogle(info.toogle)">{{info.right}}</i>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isChangeAnimate:false
    }
  },
  methods: {
    resetStyle(){
      if(this.info.val!=""){
        return;
      }
      this.isChangeAnimate=false
    },
    toogle(fun){
      if (fun!==undefined) {
        fun();
      }
    },
  },
  props:{
    info:{
      type:Object,
    }
  },
};

</script>
<style lang="scss" scoped>
div{
  height: 70px;
  width: 100%;
  position: relative;
  label{
    position:absolute;
    bottom:10px;
    font-size:16px;
  }
  input{
    width: 100%;
    height: 40px;
    border:none;
    border-bottom: 1px solid #888;
    background: transparent;
    position: absolute;
    bottom: 0px;
    &:hover{
      outline: none;
      border-bottom: 2px solid $starbucks-color;
      transition: 0.5s;
    }
  }
  i{
    position: absolute;
    top:2.5rem;
    right: 0px;
    color: $starbucks-color;
  }
}
.changeAnimate{
  bottom: 40px;
  font-size: 12px;
  transition: 0.5s;
}
.resetAnimate{
  bottom: 10px;
  font-size: 16px;
  transition: 0.5s;
}
</style>